<template>
    <div class="order page">
        <div class="con">
            <cube-scroll ref="scroll" :data="orderList" @pulling-down="pullDown" :options="options">
                <div class="order-list">
                    <div class="item" v-for="(order) in orderList" :key="order.mallOrder.id" @click="toDetail(order.mallOrder.id)">
                        <div class="title border-bottom-1px" >
                            <div class="users">
                                <!--                                <img v-if="order.fromUser.avatar" :src="order.fromUser.avatar" class="avatar" alt="">-->
                                <span class="name">{{order.fromUser.name}}</span>

                                <span   class="name" style="margin: 0 10px">&gt;</span>

                                <!--                                <img v-if="order.user.avatar" :src="order.user.avatar" class="avatar" alt="">-->
                                <span class="name">{{order.user.name}}</span>
                            </div>

                            <div class="statuses">
                                <span class="status"><!--{{orderPayStatusOptions[order.mallOrder.payStatus]}}--></span>
                                <span class="status"><!--{{orderStatusOptions[order.mallOrder.orderStatus]}}--></span>
                            </div>


                        </div>
                        <div class="order-item" v-for="(item,index) in order.mallOrder.items" :key="index">
                            <order-item :item="item"></order-item>
                        </div>

                        <div class="total">
                            <span>共{{order.mallOrder.quantity}}件商品  订单金额: ¥ </span>
                            <span class="price" v-if="order.mallOrder.price">{{order.mallOrder.price.toFixed(2)}}</span>
                        </div>

                        <div class="btns border-top-1px" >
                            <!--<radiusBtn class="btn" color="#a1a1a1" fontSize="0.32rem" borderColor="#a1a1a1" :txt="order.mallOrder.orderType==0?'物流信息':'订单明细'"
                                       width="1.733rem" height="0.69rem" bgColor="#FFFFFF"></radiusBtn>-->

                            <!--<radiusBtn class="btn" color="#F7895E" fontSize="0.32rem" borderColor="#F7895E" txt="确认收货"
                                       width="1.733rem" height="0.69rem" bgColor="#FFFFFF" @click.stop="sureReceipt(order.mallOrder.orderNo)"></radiusBtn>-->
                            <div class="btn" @click.stop="sureReceipt(order.mallOrder.orderNo)">确认收货</div>
                        </div>
                    </div>
                </div>
            </cube-scroll>


        </div>
    </div>
</template>

<script>
    import orderItem from '@/components/order-item'
    /*import radiusBtn from '@/components/base/radius-btn'*/
    import {searchReceived,sureReceipt} from "@/api/order"
    export default {
        name : "received",
        components:{orderItem},
        data(){
            return{
                orderList:[],
                page:1,
                options: {
                    pullDownRefresh: {
                        txt: ' ',
                        stopTime: 0
                    },
                    pullUpLoad: true,
                }
            }
        },
        methods:{
            async searchReceived(){
                const {data:res} = await searchReceived()
                /*if (this.page == 1) {//刷新*/
                    this.orderList = res

                /*} else {//添加
                    this.orderList = this.orderList.concat(res)
                }
                this.page++*/
            },
            pullDown() {
                this.page = 1
                this.searchReceived()
            },
            /*pullUpLoad() {
                /!*this.searchReceived()*!/
            },*/
            toDetail(id) {
                this.$router.push({
                    path: '/order/detail',
                    query: {id}
                })
            },
            //确认收货
            async sureReceipt(orderNo){
                this.$createDialog({
                    type: 'confirm',
                    icon: 'cubeic-alert',
                    title: '请确认是否收货',
                    confirmBtn: {
                        text: '确定收货',
                        active: true,
                        disabled: false,
                        href: 'javascript:;'
                    },
                    cancelBtn: {
                        text: '取消',
                        active: false,
                        disabled: false,
                        href: 'javascript:;'
                    },
                    onConfirm: () => {
                        this.$createToast({
                            type: 'loading',
                            time: 1000,
                            txt: '正在收货中'
                        }).show()
                        sureReceipt(orderNo).then(res=>{
                            if(res.code==10000){
                                const toast = this.$createToast({
                                    txt: '收货成功',
                                    type: 'correct'
                                })
                                toast.show()
                                this.searchReceived()
                            }else{
                                const toast = this.$createToast({
                                    txt: '收货失败',
                                    type: 'error'
                                })
                                toast.show()
                            }

                        })

                    },
                    onCancel: () => {
                        this.$createToast({
                            type: 'warn',
                            time: 1000,
                            txt: '取消收货'
                        }).show()
                    }
                }).show()

            }
        },
        mounted(){
            this.searchReceived()
        }
    }
</script>

<style scoped lang="stylus">
    .order
        /*overflow hidden*/
        height 100%
        overflow hidden

        .con
            height 100%
            background url("~@/assets/cbg.png") no-repeat $page-bg
            background-size 100% auto
            padding 0 10px
            padding-top 10px

            .type-bar
                display flex
                justify-content space-around
                margin-bottom 10px

                .item
                    width fit-content
                    padding 0 5px
                    display flex
                    align-items center
                    justify-content center
                    font-size: 14px;
                    font-weight: 400;
                    height 25px
                    color #6F6F6F

                    &.selected
                        color: red;
                        border-bottom 2px solid red

            .order-list
                margin-top 12px

                .item
                    border-radius 5px
                    background-color white
                    margin-top 12px


                    .title

                        /*margin-bottom 10px*/
                        height 24px
                        padding 5px 10px
                        display flex
                        align-items center
                        justify-content space-between
                        border-bottom-color  $page-bg
                        .users
                            display flex
                            align-items center
                            .avatar
                                vertical-align bottom
                                width 16px
                                height 16px
                                margin-right 6px
                                border-radius 50%
                            .name
                                vertical-align bottom
                                color #4E3D07
                                font-size 12px
                                font-weight 300

                        .statuses
                            display flex
                            align-items center
                            .status
                                vertical-align bottom
                                color #F7895E
                                font-size 12px
                                font-weight 300
                                color: rgba(247, 137, 94, 1);
                                /*line-height 24px*/
                                margin-left 20px

                    .order-item
                        padding 0 5px

                    .total
                        padding 10px 0
                        text-align right
                        padding-right 15px
                        color #A1A1A1
                        font-size 11px

                        .price
                            font-size 15px
                            color #4E3D07

                    .btns
                        display flex
                        align-items center
                        justify-content flex-end

                        height 43px
                        border-color: rgba(220, 220, 220, 1);

                        .btn
                            margin-right 16px
                            color #F7895E
                            font-size 0.32rem
                            width 1.733rem
                            height 0.69rem
                            border 0.02rem solid #F7895E
                            border-radius 0.35rem
                            display flex
                            justify-content center
                            align-items center


</style>